<template>
  <tn-navbar fixed :bordered="false" home-icon="">在场车辆</tn-navbar>

  <view>
    <view class="tn-white_bg tn-shadow">
      <view class="tn-flex tn-flex-start-start tn-text-lg tn-p-sm">
        <view class="tn-flex-1 tn-teal-dark_text tn-bold">
          <tn-icon name="taxi" color="tn-blue" size="40" />
          <text class="tn-ml">{{ useLog.numberPlate }}</text>
        </view>
        <view @click="openEditPopup" class="tn-mr-lg">
          <tn-button icon="edit" class="tn-blue_bg">修改</tn-button>
        </view>
        <view @click="deleteRecordModal">
          <tn-button icon="delete-fill" class="tn-red_bg">删除</tn-button>
        </view>
      </view>

      <tn-list-item
        v-for="(item, index) in useLogDetails"
        :key="index"
        text-color="tn-grey"
        height="20rpx">
        <view class="tn-flex justify-between tn-text-xs">
          <view class="">
            <text>{{ item.label }}</text>
          </view>
          <view class="">
            <text>{{ item.value }}</text>
          </view>
        </view>
      </tn-list-item>
    </view>
    <view class="tn-white_bg tn-shadow tn-mt tn-ridius">
      <view class="content">
        <view class="tn-mb-xl">
          <tn-title
            size="lg"
            title="出入记录"
            mode="hLine"
            sub-title="Tuniao"
            assist-color="tn-blue" />
        </view>
        <tn-time-line>
          <tn-time-line-item
            v-for="(item, index) in inOutData"
            :key="index"
            :title-icon="item.icon !== undefined ? item.icon : ''">
            <tn-time-line-data
              v-for="(dataItem, dataIndex) in item.data"
              :key="dataIndex">
              <view
                v-if="dataItem?.date"
                class="time-line__title tn-flex justify-between items-center tn-gray-dark_text">
                <view class="date">{{ dataItem?.date || "" }}</view>
                <view
                  :class="dataItem.type == 0 ? 'tn-red_text' : 'tn-teal_text'"
                  class="tn-text-lg tn-text-bold">
                  {{ dataItem?.type }}
                </view>
              </view>
              <view class="time-line__data tn-mt-sm">
                {{ dataItem?.content || "" }}
              </view>
              <view v-if="dataItem.imageUrl"
                class="image-pic"
                :style="'background-image:url(' + dataItem.imageUrl + ')'">
                <view class="image-design"></view>
              </view>
              <!-- <view class="image-pic tm-p-xs tn-mt-sm">
                <image
                  :src="dataItem.imageUrl"
                  height="100%"
                  mode="scaleToFill" />
              </view> -->
            </tn-time-line-data>
          </tn-time-line-item>
        </tn-time-line>
      </view>
    </view>

    <tn-popup
      v-model="isPopupVisible"
      width="100%"
      open-direction="top"
      top="65">
      <view class="tn-m-sm tn-p-sm">
        <tn-form ref="formRef" :model="formData" label-position="top">
          <tn-form-item label="原车牌">
            <tn-input
              v-model="formData.carPlate"
              disabled
              :custom-class="{ color: '#00D886' }"></tn-input>
          </tn-form-item>
          <tn-form-item label="新车牌">
            <tn-input v-model="formData.newCarPlate"></tn-input>
          </tn-form-item>
          <!-- <tn-form-item label="车型">
                        <tn-picker v-model="formData.carType" :options="carTypeOptions"></tn-picker>
                    </tn-form-item> -->
          <tn-form-item label="车型" prop="carType" required>
            <view @click="openEditCarType">
              <tn-input
                style="pointer-events: none"
                :model-value="formData.carType"
                placeholder="请选择车型" />
            </view>
          </tn-form-item>
          <view class="tn-flex justify-between">
            <tn-button @click="closePopup">取消</tn-button>
            <tn-button @click="confirmEdit">确认</tn-button>
          </view>
        </tn-form>
      </view>
    </tn-popup>

    <!-- 车型选择 -->

    <tn-picker
      v-model="formData.carType"
      v-model:open="openPicker"
      :data="CAR_TYPES"
      @confirm="confirmCarType"
      @close="closeCarType" />

    <tn-modal ref="modalRef" />
  </view>
</template>

<script setup lang="ts">
import {type Ref, ref} from "vue";
import TnTimeLine from "tnuiv3p-tn-time-line/time-line.vue";
import TnTimeLineItem from "tnuiv3p-tn-time-line/time-line-item.vue";
import TnTimeLineData from "tnuiv3p-tn-time-line/time-line-data.vue";
import { CAR_TYPES } from "@/utils/dict";
import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";
import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
import { goBack } from "@/utils/tnUtil";
import { onLoad } from "@dcloudio/uni-app";
const isPopupVisible = ref(false);
const formData = ref({
  carPlate: "",
  newCarPlate: "",
  carType: "",
});

const useLog: Ref<CfCarParkUseLog> = ref({});
const useLogDetails = ref([]);
const inOutData = ref([
  {
    month: "2023-07",
    icon: "taxi-fill",
    data: [
      {
        date: "2023-10-01 10:00",
        type: "1",
        content: " ", 
      },
      {
        date: "2023-10-01 10:00",
        type: "0",
        content: " 位开发者进行使用", 
      },
    ],
  },
]);

const openEditPopup = () => {
 
  formData.value.carPlate = useLog.value.numberPlate;
  formData.value.newCarPlate = "";
  isPopupVisible.value = true;
};

const closePopup = () => {
  isPopupVisible.value = false;
};
const confirmEdit = () => {
  // 确认修改逻辑
  closePopup();
};

const openPicker = ref(false);
const openEditCarType = () => {
  openPicker.value = true;
};

const closeCarType = () => {
  openPicker.value = false;
};

const confirmCarType = (value: any) => {
  formData.value.carType = value;
};

const modalRef = ref<TnModalInstance>();

const deleteRecordModal = () => {
  // 删除记录逻辑

  modalRef.value?.showModal({
    title: "提示",
    content: "是否删除当前在场车辆",
    confirmText: "确定",
    cancelText: "取消",
    showCancel: true,
    cancel: () => {
      return true;
    },
    confirm: () => {
      deleteRecord();
    },
  });
};

const deleteRecord = () => {
  // 删除记录逻辑

  goBack();
};

onLoad((params) => {
  if (params != undefined) {
    useLog.value = JSON.parse(params.id);
    useLogDetails.value.push({
      label: "车场名称",
      value: useLog.value.carParkName,
    });
    useLogDetails.value.push({
      label: "车辆类型",
      value: useLog.value.newCarType,
    });
    useLogDetails.value.push({
      label: "支付时间",
      value: useLog.value.newPayTime,
    });
    useLogDetails.value.push({
      label: "支付方式",
      value: useLog.value.paymentAgencyShortNameTitle,
    });
    useLogDetails.value.push({
      label: "应付金额",
      value: useLog.value.amountsPayable,
    });
    useLogDetails.value.push({
      label: "实付金额",
      value: useLog.value.amountActuallyPaid,
    });
    useLogDetails.value.push({
      label: "停车时长",
      value: useLog.value.parkingDuration,
    });
    useLogDetails.value.push({
      label: "家庭组",
      value: useLog.value.homeGroup,
    });
    useLogDetails.value.push({
      label: "车位编号",
      value: useLog.value.parkingSpaceNumber,
    });
    useLogDetails.value.push({
      label: "业主/单元",
      value: useLog.value.visitUnit,
    });

    //拉取进出记录图片
    getUseLogImages(useLog.value.id).then((useLogImages) => {
      if (useLogImages != null) {
        useLog.value.inBigImageUrl = useLogImages.inBigImageUrl;
        useLog.value.outBigImageUrl = useLogImages.outBigImageUrl;
      }

      inOutData.value[0].data = [];
      inOutData.value[0].data.push({
        date: useLog.value.newInTime,
        type:
          useLog.value.inCheckPointName + " | " + useLog.value.newInReleaseType,
        content: useLog.value.remarks,
        imageUrl: useLog.value.inBigImageUrl,
      });
      inOutData.value[0].data.push({
        date: useLog.value.newOutTime,
        type:
          useLog.value.outCheckPointName +
          " | " +
          useLog.value.newOutReleaseType,
        content: "出场说明",
        imageUrl: useLog.value.outBigImageUrl,
      });
    });
  }
});

/**
 * 拉取停车记录图片
 * @param _useLogId
 */
const getUseLogImages = async (_useLogId: number) => {
  const _useLogImages = await CfCarParkUtil.getCarParkUseLogImages({
    id: _useLogId,
  });
  if (_useLogImages.code == 10002) {
    return _useLogImages.data;
  } else {
    return null;
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  padding: 30rpx;

  .time-line {
    &__title {
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }
  }
}

.image-pic {
  border: 1rpx solid #f8f7f8;
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: center;
  border-radius: 18rpx;
}

.image-design {
  padding: 180rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}
</style>
